<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>评论</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/local-write.css" rel="stylesheet" />
	</head>
	<!--<input type="file" id="" value="" />-->
	<form class="local-write">
		<input type="text" name="title" id="title" class="title" placeholder="标题" />
		<textarea name="content" rows="5" cols="" class="content" placeholder="写点啥吧"></textarea>
		<ul class="upload-img-box mui-clearfix">
			<li id="add-img"></li>
		</ul>
	</form>
	<div class="write-bar">
		<div class="write-bar-item">
			<a class="save">保存到草稿箱</a>
		</div>
		<div class="write-bar-item">
			<a class="save">发布</a>
		</div>
	</div>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()

			var length = 0
			mui('.upload-img-box').on('tap', '#add-img', function() {
				var _self = this
				plus.gallery.pick(function(e) {
					var new_img_html = '<li style="background-image: url(' + e + ');"><span class="mui-icon iconfont icon-cha2"></span></li>'
					var div = document.createElement('div')
					div.innerHTML = new_img_html
					document.querySelector('.upload-img-box').insertBefore(div.querySelector('li'), _self)
					div = null
					length++

					if(length == 3) {
						_self.classList.add('hide')
					}
				}, null, {
					filter: "image"
				})
			})

			mui('.upload-img-box').on('tap', '.icon-cha2', function(e) {
				mui.confirm('要删除这张照片吗？', ' ', ['取消', '确定'], function(a) {
					if(a.index) {
						document.querySelector('.upload-img-box').removeChild(e.path[1])
						length--;
						if(length < 3) {
							document.getElementById('add-img').classList.remove('hide')
						}
					}
				}, 'div')
			})
		</script>
	</body>

</html>